<!DOCTYPE html>
<html style="height: 100%"  xmlns:th="http://www.thymeleaf.org">

<head >
    <meta charset="utf-8">
    <title>物资消耗分析</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script type="text/javascript" th:src="@{/plugins/rewardsChartsConstant.js}"></script>
    <link th:include="admin/adminGoodsUtils-common::commonheader">
    <link rel="stylesheet" th:href="@{/plugins/datatable/css/dataTables.bootstrap5.min.css}"/>
    <script th:src="@{/plugins/bootstrap/js/bootstrap.bundle.min.js}"></script>
    <!--plugins-->
    <script th:src="@{/plugins/jquery.min.js}"></script>
    <script th:src="@{/plugins/simplebar/js/simplebar.min.js}"></script>
    <script th:src="@{/plugins/metismenu/js/metisMenu.min.js}"></script>
    <script th:src="@{/plugins/perfect-scrollbar/js/perfect-scrollbar.js}"></script>
    <script th:src="@{/plugins/datatable/js/jquery.dataTables.min.js}"></script>
    <script th:src="@{/plugins/datatable/js/dataTables.bootstrap5.min.js}"></script>
    <script th:src="@{/js/app.js}"></script>
    <style>
        .card-body {
            flex: 5 3 auto;
            padding: 5rem 1rem;
        }
        .chart-container1 {
            position: relative;
            height: 600px;
        }
    </style>

</head>

<body style="height: 100%; margin: 0">
<div class="wrapper">
    <div th:replace="admin/adminGoodsUtils-common::#commonbody1"></div>
    <div th:replace="admin/adminGoodsUtils-common::#commonbody2"></div>
    <!--start page wrapper -->
    <div class="page-wrapper">
        <div class="page-content">
            <h3 class="mb-0 text-uppercase">最近一周物品消耗详情</h3>
            <br>
            <div class="card">
                <div class="card-body">
                    <div class="chart-container1 ">
                        <div id="container" style="height: 100%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    <!--    获取dom对象-->
    var dom = document.getElementById("container");
    //初始化echarts容器
    var myChart = rewardsChartsConstant.init(dom);
    var app = {};
    var option;

    setTimeout(function() {
        option = {
            //小图标置顶
            legend: {
                top: 'top'
            },
            //鼠标经过图时有提示
            tooltip: {
                trigger: 'axis',
                showContent: false
            },
            //图的标题
            title: {
                top: 'top',
                //大标题
                text: '近一周物品消耗详情图',
                //小标题
                subtext: '居民端',
            },

            dataset: {
                source: [
                    [],
                    [],
                    [],
                    [],
                    []
                ]
            },
            xAxis: {
                type: 'category'
            },
            yAxis: {
                gridIndex: 0
            },
            grid: {
                top: '55%'
            },
            series: [{
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {
                    focus: 'series'
                }
            }, {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {
                    focus: 'series'
                }
            }, {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {
                    focus: 'series'
                }
            }, {
                type: 'line',
                smooth: true,
                seriesLayoutBy: 'row',
                emphasis: {
                    focus: 'series'
                }
            }, {
                type: 'pie',
                id: 'pie',
                radius: '30%',
                center: ['50%', '25%'],
                emphasis: {
                    focus: 'self'
                },
                label: {
                    formatter: '{b}: {@2012} ({d}%)'
                },
                encode: {
                    //所有name属性都取自product
                    itemName: 'product',
                    value: '2012',
                    tooltip: '2012'
                }
            }]
        };
        myChart.on('updateAxisPointer', function(event) {
            const xAxisInfo = event.axesInfo[0];
            if (xAxisInfo) {
                const dimension = xAxisInfo.value + 1;
                myChart.setOption({
                    series: {
                        id: 'pie',
                        label: {
                            formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                        },
                        encode: {
                            value: dimension,
                            tooltip: dimension
                        }
                    }
                });
            }
        });
        //设置配置项
        myChart.setOption(option);
    });

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    fetch("/dogoodsPictograph").then(response=>response.json()).then(res=>{
        option.dataset.source[0]=res.times;
        option.dataset.source[1]=res.good1;
        option.dataset.source[2]=res.good2;
        option.dataset.source[3]=res.good3;
        option.dataset.source[4]=res.good4;
        myChart.setOption(option);        //初始化echarts;
    })
</script>
</body>

</html>
